import { DatePicker } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { useState } from "react";
import styles from "./index.scss";

type Props = {
  placeholder?: string;
  onChange?: (value: any, text?: any, values?: string[]) => void;
  value?: Date;
};

export default (props: Props) => {
  const { placeholder = "请选择", onChange = () => {}, value,...restProps } = props;
  const [showDate, setShowDate] = useState(false);
  return (
    <View className={styles.container}>
      <View className={styles.placeholder} onClick={() => setShowDate(true)}>
        {!!value ? value : placeholder}
      </View>
      <DatePicker
        {...restProps}
        value={value}
        title="日期选择"
        showChinese
        type="date"
        visible={showDate}
        onClose={() => setShowDate(false)}
        onConfirm={(options, values) => {
          onChange(values?.join("-"));
        }}
      />
    </View>
  );
};
